<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_自定义JS对象</title>
</head>
<body>
<table border="1">
    <caption>商品表</caption>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let products = [
        {title:'小米14pro',price:4999,num:500},
        {title:'华为畅享9',price:1999,num:400},
        {title:'每组60',price:2000,num:600},
        {title:'苹果16',price:6999,num:500}
    ];


    for (let i = 0; i < products.length; i++) {
        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        td1.innerHTML = products[i].title;
        td2.innerHTML = products[i].price;
        td3.innerHTML = products[i].num;
        tr.append(td1);
        tr.append(td2);
        tr.append(td3);
        let table = document.querySelector('table');
        table.append(tr);
    }

    //1.定义一个js对象
    let p1 = {
        name:'张三',
        age:18,
        say:function (){
            console.log('我是'+this.name+',今年'+this.age+'岁了');
        }
    }
    p1.say()
    console.log(p1.name,p1.age);
    console.log(p1);
    //2.先定义一个空对象,再动态向其添加属性与方法
    let p2 = {};
    p2.name = '李四';
    p2.age = 20;
    p2.say = function (){
        console.log('我是'+this.name+',今年'+this.age+'岁了');
    }
    console.log(p2.name,p2.age);
    console.log(p2);
</script>
</body>
</html>